<template>
    <section class="UserView">
          <header>
            <van-nav-bar title="嗨购商城" left-text="返回" left-arrow>
                    <template #right>
                        <van-popover v-model="showPopover" trigger="click" :actions="actions" placement="bottom-end" theme="dark" @select="onSelect">
                            <template #reference>
                                <van-icon name="ellipsis" size="24" color="black" />
                            </template>
                        </van-popover>
                    </template>
                    <div>aaaa</div>
                    <template #left>
                        <van-icon name="arrow-left"  @click="$router.go(-1)" size="24" color="black" ></van-icon>
                    </template>
                </van-nav-bar>
                <!-- 分享模块 -->
                <van-share-sheet
                v-model="showShare"
                title="立即分享给好友"
                :options="options"
                />
        </header>
        <nav class="userinfo">
            <div class="userphoto">
                <van-image
                round
                width="3.5rem"
                height="3.5rem"
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
                />
            </div>
            <div class="userLoginInfo">
                <div class="logged" v-if="flag">
                    <p><van-icon name="vip-card" color="red" size="18" /> HG_{{ username }} <van-icon name="setting-o" title="修改昵称" /></p>
                    <span @click="logOut">退出登录</span>
                </div>
                <div class="notLogin" v-else>
                    <p>请登录/注册您的账号</p>
                    <router-link to="/login">点击登录</router-link>
                </div>
            </div>
        </nav>
        <main>
            <section class="order">
                <div class="order_top">
                    <a href="">商品收藏 <span>{{ 0 }}</span></a><a href="">店铺收藏 <span>{{ 0 }}</span></a><a href="">我的足迹 <span>{{ 0 }}</span></a>
                </div>
                <div class="order_bottom">
                    <van-grid :border="false">
                        <van-grid-item :to="{ name: 'PurchaseStop1', params: { id: 1 } }" :badge="Paying" icon="https://img12.360buyimg.com/img/s60x60_jfs/t1/144453/3/26543/2290/62651dc1E9a870916/9d55698157214416.png" text="待付款" />
                        <van-grid-item :to="{ name: 'PurchaseStop1', params: { id: 2 } }" :badge="send" icon="https://img12.360buyimg.com/img/s60x60_jfs/t1/149388/24/26816/2914/62651dc1E1d5a859d/1e9d70ebcaa01281.png" text="待收货" />
                        <van-grid-item icon="https://img12.360buyimg.com/img/s60x60_jfs/t1/192293/7/23240/3633/62651dc1E8c8c7f45/1dbd5c48a5537c8a.png" text="退货/售后" />
                        <van-grid-item :to="{ name: 'PurchaseStop1', params: { id: 0 } }" :badge="alldel" icon="https://img12.360buyimg.com/img/s60x60_jfs/t1/73197/18/17564/2229/62651dc1E9eb02b59/421fc756bd04de78.png" text="全部订单" />
                    </van-grid>
                </div>
            </section>
            <section class="whiteBar order">
                <div class="order_bottom">
                    <van-grid :border="false">
                        <van-grid-item icon="https://img12.360buyimg.com/img/s59x60_jfs/t1/181893/30/23607/3772/6267c1c0E51feb772/6560b1afca6b253f.png.webp" text="客服服务" />
                        <van-grid-item icon="https://img12.360buyimg.com/img/s60x60_jfs/t1/216515/34/18229/3273/6267c3dfE721548af/18e0a2427b75b3a7.png.webp" text="我的预约" />
                        <van-grid-item icon="https://img12.360buyimg.com/img/s60x60_jfs/t1/110685/26/27072/4441/6267c401Edd8b8b42/7b6a83c417caecf0.png.webp" text="我的问答" />
                        <van-grid-item icon="https://img12.360buyimg.com/img/s60x60_jfs/t1/76070/23/18553/2532/62739b89E915f2bbd/33fdea80d024fdbe.png.webp" text="闲置换钱" />
                    </van-grid>
                </div>
            </section>
            <van-divider>为您推荐</van-divider>
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false" >
                <pro-list :proList="prolist"></pro-list>
            </van-list>
        </main>
    </section>
</template>
<style lang="stylus" scoped>
.van-divider
    border-color black
section.UserView
    flex 1
    beckground-color red
    display flex
    flex-direction column
    main
        flex: 1
        padding .3125rem
        display flex
        flex-direction column
        background-color rgb(235,235,235)
        .order
            display flex
            flex-direction column
            border-radius .625rem
            margin: 0 .625rem
            overflow hidden
            margin-top 1.25rem
            .order_top
                display flex
                justify-content space-around
                align-items center
                height 1.875rem
                background-color rgb(249,249,249)
                a
                    color #666
                    font-size .75rem
                    span
                        color black
    .userinfo
        padding .9375rem
        height 5.375rem
        display flex
        align-content: center
        background linear-gradient(180deg, #f7d6e2, #ebebeb)
        .userphoto
            display flex
            align-items center
            margin-right .625rem
        .userLoginInfo
            display flex
            div
                display flex
                flex-direction column
                justify-content space-evenly
                font-size .875rem
                a
                    color black
            .logged p
                font-size 1.125rem
</style>
<script>
import Vue from 'vue'
import proList from '@/components/proList.vue'
import { getInfo, getProlist } from '@/api/User'
import { Image as VanImage, Dialog, Icon, Grid, GridItem, NavBar, Popover, Divider, ShareSheet, Badge } from 'vant'
Vue.use(VanImage)
Vue.use(Dialog)
Vue.use(Icon)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(NavBar)
Vue.use(Popover)
Vue.use(Divider)
Vue.use(ShareSheet)
Vue.use(Badge)
export default {
  data () {
    return {
      username: '',
      actions: [{ text: '首页', icon: 'home-o', index: 0 }, { text: '分类搜素', icon: 'apps-o', index: 1 }, { text: '我的嗨购', icon: 'user-o', index: 2 }, { text: '浏览记录', icon: 'clock-o', index: 3 }, { text: '我的关注', icon: 'like-o', index: 4 }, { text: '分享', icon: 'guide-o', index: 5 }],
      showPopover: false,
      //  显示分享模块
      showShare: false,
      loading: false,
      finished: false,
      // 代发货数量
      send: 0,
      // 待付款数量
      Paying: 0,
      // 全部订单
      alldel: 0,
      // 用户id
      number: 2,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' }
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' }
        ]
      ],
      prolist: [],
      orderList: []
    }
  },
  computed: {
    flag () {
      return this.$store.state.userState
    },
    userId () {
      return this.$store.state.userId
    }
  },
  mounted () {
    // 获取用户id
    this.userid = this.$store.state.userId
    // 获取用户订单详情
    this.orderList = this.$store.state.orderState ? this.$store.state.orderState : []
    this.orderList.forEach(element => {
      if (this.userid === element.userid) {
        this.alldel++
        if (element.isflag) {
          this.send++
        } else {
          this.Paying++
        }
      }
    })
    // 获取用户名，如果没有设置用户名那么将选择注册手机号为默认用户名
    if (this.userId) {
      getInfo(this.userId).then((res) => {
        const data = res.data[0]
        if (data.username) {
          this.username = data.username
        } else {
          this.username = data.tel
        }
      })
    }
    // 获取为您推荐的数据
    getProlist().then((res) => {
      this.prolist = res.data
    })
  },
  methods: {
    // 退出登录事件
    logOut () {
      Dialog.confirm({
        message: '您确定要退出吗?'
      })
        .then(() => {
          // on confirm
          this.$store.commit('outLogin', { userState: false, token: '', userId: '' })
          localStorage.removeItem('userState')
          localStorage.removeItem('token')
          localStorage.removeItem('userid')
          this.$router.push('/login')
        })
        .catch(() => {
          // on cancel
          console.log('取消退出')
        })
    },
    // 这是右上角分享按钮的弹出效果
    onSelect (action) {
      switch (action.index) {
        case 0:
          this.$router.push('/home')
          break
        case 1:
          this.$router.push('/kind')
          break
        case 2:
          this.$router.go(0)
          break
        case 3:
          console.log('我是浏览记录模块')
          break
        case 4:
          console.log('我是关注模块')
          break
        case 5:
          console.log('我是分享模块')
          this.showShare = true
          break
      }
    },
    // 上拉加载更多推荐商品
    onLoad () {
      this.loading = true
      getProlist({ count: this.number }).then((res) => {
        this.loading = false
        if (res.data.length) {
          this.prolist = [...this.prolist, ...res.data]
          this.number++
        } else {
          this.finished = true
        }
      })
    }
  },
  components: {
    proList
  }
}
</script>
